import React, { memo, Component } from 'react' //班级管理员审批获奖情况邮件模版
import _ from 'lodash'
import './index.less'
import { Spin, Form, Image, Modal, Input, Button, message } from 'antd'
import {
  GetPrizeDetail,
  setClassApprovel,
  setSchoolApprovel
} from './../../../../api/user'
import { baseUrl, baseUrlPrize } from '../../../../assets/baseUrl'
import { getParam, formatDate, getDateDiff } from '../../../../utils/tool'
import { levelEnums, RangeEnums } from '../../../../utils/enums'
const BaseUrl = baseUrlPrize()
const { TextArea } = Input
class TemplateOne extends Component {
  constructor(props) {
    super(props)
    this.state = {
      extra: props.extra, //
      detail: props.detail || 1, //获取的审核数据
      previewVisible: false,
      previewImage: null,
      imgs: [], //图片数组
      prizeKey: '', //获奖等级
      level: '', //获奖类型
      visible: false, //输入弹窗的开关
      textFont: '',
      classAllow: '1',
      disableButton: false
      // visible: false, //FLow框是否可见
      // color: props.color || 'rgb(255, 101, 101)', //Flow框阴影色
      // colorful: props.colorful || true, //Flow框随机变色
      // width: props.width || 400, //Flow框宽度
      // realWidth: props.width || 400 //Flow框实际宽度
    }
  }
  hideModal() {
    //关闭弹窗
    this.setState({
      visible: false
    })
    this.postOption(0)
  }
  postOption(e) {
    setClassApprovel({
      reason: this.state.textFont || '',
      lineKey: this.state.extra,
      classAllow: e
    }).then((res) => {
      if (res.data.code == 200) {
        message.success(res.data.message)
        this.setState({ disableButton: true })
        this.getDetail()
      }
    })
  }
  componentDidMount() {
    this.getDetail()
  }
  getDetail() {
    GetPrizeDetail({ lineKey: this.state.extra }).then((res) => {
      // debugger
      if (res?.data?.code == 200) {
        if (
          res.data.data.refusedReason != '' ||
          res.data.data.classAllow == 1
        ) {
          this.setState({ disableButton: true })
        }
        console.log(res, 'success!')
        let image = []
        image = res.data.data?.fileUrl?.split(',')
        // debugger
        console.log(image, '图片处理')

        RangeEnums.map((item, index) => {
          if (item.key == res.data.data?.prizeLevel) {
            this.setState({
              prizeKey: item.value
            })
          }
        })
        levelEnums.map((item, index) => {
          if (item.key == res.data.data?.level) {
            this.setState({
              level: item.value
            })
          }
        })
        this.setState({
          detail: res.data.data,
          imgs: image
        })
      }
    })
  }
  render() {
    const {
      extra,
      detail,
      previewVisible,
      previewImage,
      imgs,
      level,
      prizeKey,
      visible,
      textFont,
      disableButton
      // colorful,
      // width,
      // realWidth
    } = this.state
    return (
      <div>
        <div className="flex" style={{ marginTop: 24 }}>
          <div
            style={{
              padding: '30px 0 30px 48px',
              width: '45vw',
              backgroundColor: 'rgba(255,255,255,.5)',
              borderRadius: 16,
              marginLeft: '3%',
              boxShadow: '1px 1px 5px rgb(129,129,129)'
            }}
          >
            <ul className="detail-ui">
              <li
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  marginRight: '20px'
                }}
              >
                <span>材料显示</span>
                {detail.classAllow == 1 ? (
                  <Button type="primary" disabled={true}>
                    已通过
                  </Button>
                ) : detail.refusedReason != '' ? (
                  <div>
                    <Button type="primary" disabled={true}>
                      已驳回
                    </Button>
                    <div style={{ color: 'red' }}>
                      驳回理由：{detail.refusedReason}
                    </div>
                  </div>
                ) : (
                  <span>
                    <Button
                      type="primary"
                      disabled={disableButton}
                      onClick={this.postOption.bind(this, 1)}
                    >
                      通过
                    </Button>{' '}
                    <span style={{ width: '20px' }}></span>
                    <Button
                      type="primary"
                      onClick={() =>
                        this.setState({
                          visible: true
                        })
                      }
                      danger
                      disabled={disableButton}
                    >
                      驳回
                    </Button>
                  </span>
                )}
              </li>{' '}
              <li>
                {imgs?.map((item) => {
                  return (
                    <img
                      className="thingImage"
                      src={`${BaseUrl}${item}`}
                      alt=""
                      onClick={() => {
                        this.setState({
                          previewVisible: true,
                          previewImage: `${BaseUrl}${item}`
                        })
                      }}
                      style={{
                        marginRight: '10px',
                        borderRadius: '5px',
                        border: '1px solid white',
                        height: '100px'
                      }}
                    />
                  )
                })}
                {/* {
                                        imgs.map((item) => {
                                            return (
                                                <img
                                                    className='thingImage'
                                                    src={`${BaseUrl}${item}`}
                                                    alt=''
                                                    onClick={() => {
                                                        this.setState({
                                                            previewVisible: true,
                                                            previewImage: `${BaseUrl}${item}`
                                                        })
                                                    }}
                                                    style={{marginRight:'10px',borderRadius:'5px',border:'1px solid white',height:'100px'}}
                                                />
                                            )
                                        })
                                        
                                    } */}
              </li>
              <li style={{ display: 'flex' }}>
                <span>
                  <div>
                    {' '}
                    <span>获奖名称：</span>
                    {`${detail?.name}`}{' '}
                  </div>
                  <div>
                    <span>作品名称：</span>
                    {`${detail?.workName}`}
                  </div>
                  <div>
                    <span>获奖时间：</span>
                    {`${detail?.year}` + '年' + `${detail?.month}` + '月'}
                  </div>
                  <div>
                    <span>提交时间：</span>
                    {`${formatDate(detail?.createTime)}  (${getDateDiff(
                      detail?.createTime
                    )})`}
                  </div>
                </span>
                <span style={{ marginLeft: '20px' }}>
                  <div>
                    {' '}
                    <span>指导老师：</span>
                    {`${detail?.teachers}`}
                  </div>

                  <div>
                    <span>是否队长：</span>
                    {`${detail?.captain}` == 1 ? '是' : '否'}
                  </div>

                  <div>
                    <span>获奖等级：</span>
                    {`${prizeKey}`}
                  </div>
                  <div>
                    <span>获奖类型：</span>
                    {`${level}`}
                  </div>
                </span>
              </li>
              <div></div>
            </ul>
          </div>
        </div>
        <Modal
          visible={previewVisible}
          title="预览图片"
          footer={null}
          onCancel={() => {
            this.setState({
              previewVisible: false
            })
          }}
        >
          <img
            alt="example"
            style={{ width: '100%', border: 'none' }}
            src={previewImage}
          />
        </Modal>
        <Modal
          visible={visible}
          title="驳回原因"
          // footer={null}
          onOk={this.hideModal.bind(this)}
          onCancel={() => {
            this.setState({
              visible: false
            })
          }}
        >
          <TextArea
            value={textFont}
            placeholder="请填写驳回原因"
            onChange={(e) => {
              // debugger
              this.setState({
                textFont: e.target.value
              })
            }}
            rows={4}
          />
        </Modal>
      </div>
    )
  }
}
export default TemplateOne
